<template>
    <div class="myhander">
        <div class="gohomepageicondiv1">
            <div class="gowhereworddiv"><span class="gowhereword" :style="changecolorhomepage">主页</span></div>
            <div class="gowhereimgdiv"><img src="../../../assets/icon/gohomepage.png" class="gowhereimg" 
            @click="imggohomepage" @mouseover="homepagemouseover" @mouseleave="homepagemouseleave"></div>
        </div>
        <div class="gohomepageicondiv2">
            <div class="gowhereworddiv"><span class="gowhereword" :style="changecolorcart">购物车</span></div>
            <div class="gowhereimgdiv"><img src="../../../assets/icon/gocart.png" class="gowhereimg" 
            @click="imggocart" @mouseover="cartmouseover" @mouseleave="cartmouseleave"></div>
        </div>
        <div class="gohomepageicondiv3">
            <div class="gowhereworddiv"><span class="gowhereword" :style="changecolororder">我的订单</span></div>
            <div class="gowhereimgdiv"><img src="../../../assets/icon/myorder.png" class="gowhereimg" 
            @click="imggoorder" @mouseover="ordermouseover" @mouseleave="ordermouseleave"></div>
        </div>
    <el-dropdown class="myiconsetting">
        <i class="el-icon-setting" style="margin-right: 30px;margin-top:22px"></i>
        <el-dropdown-menu slot="dropdown" class="headerdropdown">
        <el-dropdown-item><div @click="goxpermain">用户中心</div></el-dropdown-item>
        <el-dropdown-item ><div @click="logout">退出登陆</div></el-dropdown-item>
        </el-dropdown-menu>
    </el-dropdown>
    <span>{{showusername}}</span>
    </div>
</template>

<script>
import axios from 'axios'
    export default {
        name:'XiaoHeaderIcon',
        data(){
            return{
                changecolorhomepage:'',
                changecolorcart:'',
                changecolororder:'',
                changewordcolor:'color: rgb(255, 255, 255);',
                showusername:'',
            }
        },
        mounted(){
            this.$addr.get(`users/get_by_uid`).then(
            response=>{
                console.log('请求成功了,我得到了用户数据',response)
                this.showusername=response.data.data.username
            },error=>{
                // this.$message({
                //     message: '呕吼请求失败了',
                //         type: 'warning'
                //     });
                console.log('请求失败了,我没有获取到用户的数据',error)
            })
        },
        methods:{
            goxpermain(){
                this.activeName=this.activeName2='',
                console.log('回到个人信息主页')
                this.$router.push('/gopermain')
            },
            logout(){
                console.log('退出登陆成功');
                this.$message({
                    message: '退出登陆成功',
                    type: 'success'
                });
                this.$router.replace({name:'xLogin'})
            },
            imggohomepage(){
                 this.$router.push({name:'xHomepage'})
            },
            imggocart(){
                 this.$router.push({name:'xCart'})
            },
            imggoorder(){
                this.$router.push({name:'xOrderList'})
            },
            homepagemouseover(){
                this.changecolorhomepage=this.changewordcolor
                this.changecolorcart=this.changecolororder=''
            },
            homepagemouseleave(){
                this.changecolorhomepage=''
            },
            cartmouseover(){
                this.changecolorcart=this.changewordcolor
                this.changecolorhomepage=this.changecolororder=''
            },
            cartmouseleave(){
                this.changecolorcart=''
            },
            ordermouseover(){
                this.changecolororder=this.changewordcolor
                this.changecolorhomepage=this.changecolorcart=''
            },
            ordermouseleave(){
                this.changecolororder=''
            },
        },
    }
</script>

<style scoped>
    .myhander{
        color: rgb(0, 0, 0);
        height: 60px;
        font-size: 12px;
        width: 100%;
    }
    .gohomepageicondiv1{
        float: right;
        margin-right: 210px;
        width: 30px;
    }
    .gohomepageicondiv2{
        width: 30px;
        margin-right: 150px;
        float: right;
    }
    .gohomepageicondiv3{
        width: 30px;
        margin-right: 90px;
        float: right;
    }
    .myiconsetting{
        float: right;
    }
    .gowhereimgdiv{
        margin-left: 12px;
        margin-top: 13px;
        width: 50px;
        position: absolute;
    }
    .gowhereimg{
        height: 22px;
        width: 25px;
        cursor: pointer;
    }
    .gowhereworddiv{
        text-align: center;
        width: 50px;
        margin-top: 35px;
        position: absolute;
    }
    .gowhereword{
        position: relative;
        font-size: 12px;
    }
</style>